<template>
	<view class="uni-content">
		<popup ref="mapState" protocolPath='/pages/agreement/agreement' policyPath='/pages/agreement/privacy'
			@popupState="popupState" v-if="agree == false"></popup>
		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" :info="info" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item" :class="'swiper-item' + index">
						<image :src="item.url" style="width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<uni-card is-full :border="false" :is-shadow="false" v-if="isLogin == true && agree == true">
			<view class="uni-box-head" style="">
				<uni-title type="h3" align="center" title="请扫码用餐" style="letter-spacing:3px;"></uni-title>
			</view>
			<view class="qr-box">
				<canvas canvas-id="qrcode"
					:style="{width: screenWidth/2 + 'px',height:screenWidth/2 + 'px', margin: '0 auto' }" />
			</view>
		</uni-card>
		<uni-card is-full :border="false" :is-shadow="false" v-if="isLogin == false">
			<view class="uni-box-head">
				<uni-title type="h1" align="center" title="使用说明"></uni-title>
			</view>
			<view class="uni-box" v-if="open_register == true">
				<uni-title class="h2" type="h2" title="1. 未注册"></uni-title>
			</view>
			<view class="uni-box" v-if="open_register == true" style="padding-left: 1rem;">
				<view class="tag-view">
					<button type="default" size="default" @click="toRegister"
						style="background-color: blue;color: aliceblue;">去注册</button>
				</view>
			</view>

			<view class="uni-box">
				<uni-title class="h2" type="h2" title="2. 操作步骤">
				</uni-title>
			</view>
			<view class="uni-box" style="padding-left: 1rem;">
				<text class="uni-text" style="font-size: 18px;">1.食堂领卡</text><br>
				<text class="uni-text" style="font-size: 18px;">2.注册账号</text><br>
				<text class="uni-text" style="font-size: 18px;">3.绑定微信</text><br>
				<text class="uni-text" style="font-size: 18px;">4.在线充值</text><br>
				<text class="uni-text" style="font-size: 18px;">5.刷卡消费</text><br>
			</view>
			<view class="uni-box">
				<uni-title class="h2" type="h2" title="3. 已注册,还未绑定微信"></uni-title>
			</view>
			<view class="uni-box" style="padding-left: 1rem;">
				<view class="tag-view">
					<button type="default" size="default" @click="toBind"
						style="color: white;background-color: aqua;">去绑定</button>

				</view>
			</view>
		</uni-card>

	</view>
</template>

<script>
	//主页
	import popup from '@/components/DuDu-popup/DuDu-popup.vue'
	import uQRCode from '@/components/uqrcode/uqrcode.js'
	export default {
		components: {
			popup
		},
		data() {
			return {
				info: [{
						url: 'https://shitang.prison0476.top/statics/mini/img/index_bg0.jpg',
						content: '1'
					},
					{
						url: 'https://shitang.prison0476.top/statics/mini/img/index_bg1.jpg',
						content: '2'
					},
					{
						url: 'https://shitang.prison0476.top/statics/mini/img/index_bg2.jpg',
						content: '3'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
				},
				swiperDotIndex: 0,
				isLogin: false,
				sessionKey: '',
				try_login: {},
				agree: false,
				cardNo: "",
				openId: "",
				open_register: true,
				screenWidth: 0,
			}
		},
		onLoad() {
			let getWindowInfo = uni.getWindowInfo();
			this.screenWidth = getWindowInfo.screenWidth;
		},
		onShow() {
			let that = this;
			uni.login({
				onlyAuthorize: true,
				success: function(response) {
					uni.request({
						url: that.baseUrl + '/wx/user/login',
						data: {
							code: response.code
						},
						success(res) {
							if (res.data.type === 'success') {
								if (res.data.data.isNew) {
									that.isLogin = false;
								} else {
									that.isLogin = true;
								}
								uni.setStorage({
									key: 'wx_openid',
									data: res.data.data.openid,
								});
								uni.setStorage({
									key: 'wx_session_key',
									data: res.data.data.sessionKey,
								});
								uni.setStorage({
									key: 'user_info',
									data: res.data.data.userData,
								});
								that.cardNo = res.data.data.userData.cardNo;
								that.qrFun(that.cardNo)
							}
						}
					})
				},
			})
			uni.getStorage({
				key: 'agree',
				success: function(res) {
					// that.agree = res.data
				}
			});
			uni.request({
				url: that.baseUrl +'/config/getConfig',
				method: 'GET',
				dataType: 'json',
				data: {
					openId: that.openId,
				},
				success(resp) {
					if (resp.data.type === 'success') {
						that.open_register = resp.data.data.open_register
					}
				}
			})
		},
		methods: {
			//**生成二维码**//
			qrFun: function(text) {
				if (text != undefined && text.length > 0) {
					let that = this;
					let size_ = that.screenWidth / 2;
					console.log(size_)
					uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						text: that.cardNo,
						size: size_,
						margin: 0,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						errorCorrectLevel: uQRCode.errorCorrectLevel.H,
						success: res => {}
					})
					uni.setScreenBrightness({
						value: 0.9,
						success: function() {
							console.log('success');
						}
					});
				}
			},
			clickItem() {

			},
			change(e) {
				this.current = e.detail.current
			},
			popupState(e) {
				if (e) {
					this.agree = true;
					uni.setStorage({
						key: 'agree',
						data: true,
					});
				}
			},
			toRegister() {
				let that = this;
				uni.redirectTo({
					url: "/pages/binding/register"
				})
			},
			toBind() {
				let that = this;
				uni.redirectTo({
					url: "/pages/binding/binding"
				})
			},
			async tryLogin() {
				let that = this
				uni.login({ //直接用这个调用微信接口
					onlyAuthorize: true,
					success: function(response) {
						uni.request({
							url: that.baseUrl + '/wx/user/login',
							data: {
								code: response.code
							},
							success(res) {}
						})
					},
				})
			},
			async login() {
				let that = this //保存当前作用域
				await uni.login({ //直接用这个调用微信接口
					onlyAuthorize: true,
					success: function(response) { // 用微信登录的话就要去微信开发工具
						//微信登录，获取用户信息
						uni.request({
							url: that.baseUrl + '/wx/user/login',
							data: {
								code: response.code
							},
							success(res) {
								that.sessionKey = res.data.data.sessionKey
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	swiper {
		height: 200px !important;
	}

	.uni-h2 {
		font-size: 20px;
	}

	.uni-h1 {
		font-size: 24px !important;
	}

	.uni-tag--default {
		font-size: 14px !important;
	}

	.qr-box {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
</style>